<template>
  <div class="one">
    <p>
      一级页面
      <button @click="goToInfo">展示二级页面</button>
    </p>

    <router-view v-slot="{ Component }" class="two">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <!-- <router-view class="two"></router-view> -->
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    const query = ref(123456);

    function goToInfo() {
      query.value = Math.floor(Math.random() * 100);
      router.push("/about/info?id=" + "汉字");
    }

    return {
      goToInfo,
    };
  },
};
</script>

<style scoped>
.one {
  border: 1px solid green;
  padding: 20px;
}

.two {
  border: 1px solid rgb(0, 36, 128);
  padding: 20px;
}
</style>